<template>
  <div>
    <ul>
      <li v-for="film in films" :key="film.filmId" @click="toDetail(film)">
        {{ film.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import axios from "axios";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const data = reactive({
  films: null,
});
const { films } = toRefs(data);

onMounted(async () => {
  const res = await axios({
    method: "get",
    url: "https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=6808102",
    headers: {
      "X-Client-Info":
        '{"a":"3000","ch":"1002","v":"5.2.1","e":"16926962702329006145798145"}',
      "X-Host": "mall.film-ticket.film.list",
    },
  });
  data.films = res.data.data.films;
});

const toDetail = (film) => {
  // 编程式路由其实很简单，就是调用路由对象的push方法，因为我们的router都是通过createRouter方法创建出来的，所以可以使用vue为我们提供的push方法，push方法的使用其实有四种方式，最简单的就是像我们这样，只传一个路径字符串作为参数。
  //   router.push(`/detail/${film.filmId}`);
  //   router.push({ path: `/detail`, query: { filmId: film.filmId } }); //第二种方式就是传一个对象，path代表路径，query代表你要像目标路由传的参数，当然，你没有参数可以不写query。不过要注意的是，query方式是会以 ?filmId=xxx的方式体现在路径上的，不同于上面的/detail/xxx，所以请根据实际情况选择用哪种
  router.push({ name: "detail", params: { filmId: film.filmId } }); //第三种方式适用于命名路由，请确保你在定义路由的时候给路由加了name属性并在这里和它对应上即可，params就是你要传递的参数，和第一种一样，路径上的体现是/detail/xxx

  // 总结，如果你在router定义的时候选择了 /detail/:filmId的这种形式，那么建议你在push的时候使用params和路径拼接，其他情况再使用query
};
</script>

<style lang="scss" scoped>
</style>